<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>
	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
	<!-- End_Exclude -->
    
    <!-- Add code to initialize the tree when the document is loaded: -->
    <script type='text/javascript'>
    $(function(){
		var children = [
					{title: "Item 1"},
					{title: "Folder 2", isFolder: true, key: "folder2",
						children: [
							{title: "Sub-item 2.1"},
							{title: "Sub-item 2.2"}
						]
					},
					{title: "Folder 3", isFolder: true, key: "folder3",
						children: [
							{title: "Sub-item 3.1"},
							{title: "Sub-item 3.2"}
						]
					},
					{title: "Item 4"}
				];

		$("#tree1").dynatree({
			onActivate: function(dtnode) {
				logMsg("Activated %o", dtnode);
			},
			rootVisible: true,
			minExpandLevel: 0,
			children: children
		});
		$("#tree2").dynatree({
			onActivate: function(dtnode) {
				logMsg("Activated %o", dtnode);
			},
			rootVisible: true,
			minExpandLevel: 1,
			children: children
		});
		$("#tree3").dynatree({
			onActivate: function(dtnode) {
				logMsg("Activated %o", dtnode);
			},
			rootVisible: false,
			minExpandLevel: 1,
			children: children
		});
		$("#tree4").dynatree({
			onActivate: function(dtnode) {
				logMsg("Activated %o", dtnode);
			},
			rootVisible: false,
			minExpandLevel: 2,
			children: children
		});

    });
    </script>
</head>

<body class="example">
	<h1>Example: Expand level</h1>

    <!-- Add a <div> element where the tree should appear: -->
	<p class="description">Root visible, minExpandLevel=0</p>
    <div id="tree1"> </div>

	<hr>
    <p class="description">Root visible, minExpandLevel=1</p>
    <div id="tree2"> </div>

	<hr>
    <p class="description">Root hidden, minExpandLevel=1<br>
    This is the default option:</p>
    <div id="tree3"> </div>

	<hr>
    <p class="description">Root hidden, minExpandLevel=2<br>
    Note, that you cannot collapse the top-level nodes:</p>
    <div id="tree4"> </div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" class="codeExample">View source code</a>
	</p>
	<!-- End_Exclude -->
</body>
</html>
